<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Remote Debugger</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 15px;
            width: 320px;
            color: #333;
        }
        
        h1 {
            font-size: 18px;
            margin-top: 0;
            margin-bottom: 15px;
            color: #444;
        }
        
        .form-group {
            margin-bottom: 15px;
        }
        
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
            font-size: 14px;
        }
        
        input[type="text"] {
            width: 100%;
            padding: 8px;
            box-sizing: border-box;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 14px;
        }
        
        .button-group {
            display: flex;
            gap: 10px;
        }
        
        button {
            padding: 8px 12px;
            background-color: #4285f4;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            flex: 1;
        }
        
        button:hover {
            background-color: #3367d6;
        }
        
        button:disabled {
            background-color: #ccc;
            cursor: not-allowed;
        }
        
        button#disconnectButton {
            background-color: #db4437;
        }
        
        button#disconnectButton:hover {
            background-color: #c5372c;
        }
        
        .status {
            margin-top: 15px;
            padding: 10px;
            border-radius: 4px;
            background-color: #f5f5f5;
            font-size: 14px;
        }
        
        .status.connected {
            background-color: #e6f4ea;
            color: #0f9d58;
        }
        
        .status.disconnected {
            background-color: #f8f9fa;
            color: #5f6368;
        }
        
        .status.error {
            background-color: #fce8e6;
            color: #d93025;
        }
        
        .debug-data {
            margin-top: 15px;
            max-height: 200px;
            overflow-y: auto;
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 8px;
            font-size: 12px;
            font-family: monospace;
        }
        
        .debug-item {
            margin-bottom: 8px;
            padding-bottom: 8px;
            border-bottom: 1px solid #eee;
        }
        
        .debug-item:last-child {
            margin-bottom: 0;
            padding-bottom: 0;
            border-bottom: none;
        }
        
        .command-box {
            margin-top: 15px;
        }
        
        .hidden {
            display: none;
        }
    </style>
</head>

<body>
    <h1>WebSocket 调试器</h1>

    <div class="form-group">
        <label for="wsUrl">WebSocket 服务器地址：</label>
        <input type="text" id="wsUrl" placeholder="ws://example.com:8080" value="ws://localhost:8080">
    </div>

    <div class="button-group">
        <button id="connectButton">连接</button>
        <button id="disconnectButton" disabled>断开连接</button>
    </div>

    <div class="status disconnected" id="connectionStatus">
        状态：未连接
    </div>

    <div id="commandArea" class="command-box hidden">
        <div class="form-group">
            <label for="commandInput">发送指令：</label>
            <input type="text" id="commandInput" placeholder="输入JSON命令">
        </div>
        <button id="sendCommandButton">发送</button>
    </div>

    <div id="debugDataContainer" class="debug-data hidden">
        <div id="debugData"></div>
    </div>

    <script src="popup.js"></script>
</body>

</html>